<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络聊天室
    </title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">网页聊天</div>
    <!-- 主窗口 -->
     <div class="login-container">
        <div class="login-dialog">
            <h3>登录</h3>
            <div class="row">
                <span>用户名</span>
                <input type="text" id="username" placeholder="请输入用户名">
            </div>
            <div class="row">
                <span>密码</span>
                <input type="password" id="password"  placeholder="请输入密码">
            </div>
            <div class="row">
                <button id="submit" onclick="submit()">登录</button>
            </div>
            <a href="./register.html">还没有账号?去注册</a>
        </div>

     </div>
     <script src="js/jquery-3.6.0.min.js"></script>
     <script src="js/common.js"></script>
     <script>
        $("#username").val('');
        $("#password").val('');
        function submit(){
            var username=$("#username").val().trim();
            var password=$("#password").val().trim();
            if(username==''||password==''){
                alert("输入的用户名或密码为空");
                return;
            }
           
           
            //不为空,构建ajax请求
            $.ajax({
                type:"post",
                url:"chatRoom/login",
                data:{
                    username:username,
                    password:password
                },
                success:function(data){
                    console.log(data);
                    
                    if(data && data.userId>0){
                        alert("登陆成功");
                        location.assign("client.html");
                    }else{
                        alert("用户名或密码不正确,请重新输入");
                    }
                    $("#username").val('');
                    $("#password").val('');
                    
                }
            })
        }
     </script>
</body>
</html>